@import './base.css';

body, #app {
  background: #f5f7fa !important;
}

#app {
  width: 100%;
  padding: 0;
  font-weight: normal;
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }

  #app {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0;
  }
}

/* 页面容器基础样式 */
.salary-analysis-container,
.industry-analysis-container,
.region-analysis-container,
.employment-report-container,
.trend-report-container,
.data-management-container,
.help-container,
.dashboard-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 图表行布局 */
.chart-row {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  min-height: 0;
  margin: 0 !important;
}

/* 图表容器 */
.chart-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 图表 */
.chart {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* 数据表格 */
.data-table {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.table-content {
  flex: 1;
  overflow: auto;
}

/* 统计卡片 */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  flex-shrink: 0;
}

/* 过滤器区域 */
.filter-row {
  flex-shrink: 0;
}

/* 移除默认的 Element Plus 间距 */
.el-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.el-col {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 卡片内容区域 */
.el-card__body {
  height: 100%;
  padding: 15px !important;
  display: flex;
  flex-direction: column;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.el-main,
.el-container,
.app-main,
.region-analysis-container {
  background: #f5f7fa !important;
}
